<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>招新统计</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
</head>
<style>
   .tab-title{text-align:center;font-size: 18px;font-weight:bold;color:#333;margin-top:20px;}
   .tab-tit-span{text-align:center;font-size:14px;color:#666;margin-top: 0!important;}
   .tab-tit-span span{display:inline-block;margin:10px; font-weight: normal; }
   .tab-tit-span span .red{ margin:0 3px; font-weight: bold;}
</style>
<body>
<div class="wrap-container clearfix">
    <div class="tab-title"></div>
    <div class="tab-title tab-tit-span" style=""></div>
    <div class="column-content-detail">
        <form class="layui-form">
            <div class="search-cont clearfix" id="tool">
                <div class="operation-btn-cont">
                    <div class="operright cyt-retract-close hideMenu"> 收起筛选<i class="iconfont">&#xe658;</i></div>
                    <div class="operright cyt-retract-open showMenu" style="display: none;"> 展开筛选<i class="iconfont">&#xe936;</i></div>
                    <button class="layui-btn layui-btn-normal layui-btn-mid" type="button" id="static"><i class="iconfont marr5">&#xe606;</i>人员统计</button>
                    <button class="layui-btn layui-btn-normal layui-btn-mid" type="button" id="exportExcel"><i class="iconfont marr5">&#xe614;</i>导出社团</button>

                    <div class="triangle-bottom"></div>
                    <div class="triangle-top"></div>
                </div>
                <div class="search-details">
                    <div class="layui-form-item marb5">
                        <!--search开始-->
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:80px!important;">社团名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" id="title" name="title" placeholder="请输入社团名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <!--search结束-->
                        <div class="layui-inline marl8">
                            <button class="layui-btn layui-btn-normal" type="button" id="searchBtn">搜索</button>
                            <button class="layui-btn layui-btn-normal" type="button" id="resetBtn">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="society-list clearfix" id="content">
        </div>
        <div id="page">
        </div>
    </div>
</div>
<!--操作-->
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>

    var applyId='${applyId}';
    var id ='${id}';
    var page = null;
    var dialog = null;
    var curr = 1;// 当前页，初始值设为 1
    var limit = 10;// 每页条数，初始值设为 10
    var total;// 总记录数
    layui.use(['jquery', 'table', 'page','baseutil', 'dialog'], function () {
        var $ = layui.jquery,
            baseutil = layui.baseutil,
            page = layui.page;
        $(document).ready(function () {
            getInfo();// 获取数据
            toPage();// 进行分页
            loadAssNew();

        });

       //人员统计
        $('#static').bind('click', function () {
            debugger;
            page.edit("assocaitionPeopleStiatic","/work/associationNew/wxassociationnew/getPeopleStitic?applyId="+applyId+'&id=' + id,"人员统计");
        });
        //导出社团
        $("#exportExcel").on("click",function () {
            window.location.href = "/work/associationNew/wxassociationnew/export?id="+id;
        });
        function getInfo() {
            var title = $("#title").val();
            $.ajax({
                type: "post",
                url: "/work/wxassocationnewDetail/wxassociationnewdetail/findVoPage",
                async: false,// 设置同步请求，加载数据前锁定浏览器
                dataType: 'json',
                data: {
                    "page": curr, // 查询页码
                    "limit": limit, // 每页条数
                    "title":title,
                    "applyId":applyId,
                    "associationNewId":id
                },
                success: successFu
            });
        }

        // 数据请求成功
        function successFu(pager) {
            //console.log(data);
            // 1.清空原数据
            $("#content").html("");
            total = pager.count;
            if (pager.total == 0) {
                return;
            }
            var text = '<ul>';
            $.each(pager.data, function (i, item) {
                var  pathString = '/sysFile/showFileByPath?path=' + item.path;
                text+='<li>'+
                    '<div class="toppic" style="background: url('+pathString+') top center no-repeat;background-size: cover;"></div>'+
                    '</div>'+
                    '<h1>'+item.title+'</h1>'+
                    '<h2>指导老师：<span>'+item.userName+'</span></h2>'+
                    '<h2>招新<span class="num-blue">'+item.totalNumber+'</span>人，已招<span class="num-blue">'+item.stuNumber+'</span> 人</h2>'+
                    '</li>';
            });
            text +='</ul>';
            $("#content").html(text);
        }

        // 查询
        $('#searchBtn').bind('click', function () {
            getInfo();// 获取数据
            toPage();// 进行分页
        });
        // 重置
        $('#resetBtn').bind('click', function () {
            $("#title").val("");
            getInfo();// 获取数据
            toPage();// 进行分页
        });


        //首次获取社团招新详情
        var newStatus = "";//判断这次招新状态
        function loadAssNew() {
            baseutil.get('/work/associationNew/wxassociationnew/associationNewStatis', {"id":id}, function (result) {
                if (result.code == 0) {
                    //招新内容
                    var data = result.data;
                    $(".tab-title").first().html(data.title);
                    var titleContent = "<span>招新日期：" + data.beginDate + "到" + data.endDate + "</span>";
                    titleContent += "<span>招新时间段：" + data.beginTime + "到" + data.endTime + "</span>";
                    var statusName = "发布中";
                    newStatus = data.status;
                    if (data.status == "2") {
                        statusName = "已结束";
                    }

                    titleContent += "<span>招新状态：" + statusName + "</span>";
                    titleContent += "<span>共招新<span class='red'>" + data.totalNumber + "</span>人</span>";
                    titleContent += "<span>已招新<span class='red'>" + data.stuNumber + "</span>人</span>";
                    $(".tab-title:eq(1)").html(titleContent);

                } else {

                }
            });

        }



        // 进行分页
        function toPage() {
            // 调用分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                // 调用分页
                laypage.render({
                    // 分页容器的id
                    elem: 'page',// *必选参数
                    // 数据总数，从服务端得到
                    count: total,// *必选参数
                    // 每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                    //limit:limit,
                    // 起始页
                    //curr:Pager,
                    // 连续出现的页码个数
                    //groups:5,
                    // 自定义每页条数的选择项
                    limits: [10, 25, 50, 100],
                    // 自定义首页、尾页、上一页、下一页文本
                    first: '首页',
                    last: '尾页',
                    prev: '<em><<</em>',
                    next: '<em>>></em>',
                    // 自定义主题
                    theme: "#FF5722",
                    // 自定义排版
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    // 渲染数据
                    jump: function (data, first) {
                        // data包含了当前分页的所有参数
                        curr = data.curr;
                        limit = data.limit;

                        // 首次不执行
                        if (!first) {
                            getInfo();
                        }
                    }
                });
            })
        }

    });


</script>
</body>
</html>